/*
 * Author： Lee
 * Create Time: 2018-02-01
 * Description: 向上T型管道
 * CopyRight:
 **/

import React, {Component} from 'react';

import './index.css';

export default class UpTWayPipe extends Component {
    constructor( props) {
        super( props);
        console.log( 'UpTWayPipe props', this.props);
        /*
         * * props 参数说明
         * x：相对位置x坐标
         * y: 相对位置y坐标
         * width： 宽度
         * height：高度
         * color: 水流颜色
         * 管道的默认颜色 #949494
         * state状态表示，是否有水流, 默认颜色： #1830fb
         * */
        this.state = {
            fill: this.props.fill ? this.props.fill : false,
        };
    }

    render() {
        return (
            <svg className="UpTWayPipeBox" label={this.props.label ? this.props.label : 'UpTWay'} x={ this.props.x ? this.props.x : '1500'} y={ this.props.y ? this.props.y : '950'} width={ this.props.width ? this.props.width : '100'} height={ this.props.height ? this.props.height : '100'}>
                <svg className="UpTWayPipeContent" viewBox='0 0 100 100'>
                    <rect x='0%' y='30%' width='100%' height='40%' fill='#949494'>
                    </rect>
                    <path d='M30,0 L30,30 L50,50 L70,30 L70,0 Z' fill='#949494'>
                    </path>
                    <g style={{ display: this.state.fill ? 'block' : 'none'}}>
                      <rect x="0%" y="40%" width="100%" height="20%" fill={this.props.color ? this.props.color : '#1830fb'} >
                      </rect>
                      <path d='M40,0 L40,40 L50,50 L60,40 L60,0 Z' fill={ this.props.color ? this.props.color : "#1830fb"}>
                      </path>
                    </g>
                </svg>
            </svg>
        );
    }
}

